<template>
  <div>
    <!-- input 和 button 是互斥 v-if  v-else -->
    <input
      ref="myInp"
      type="text"
      placeholder="这是一个输入框"
      v-if="isShow"
    >
    <!-- autofocus -->
    <button
      v-else
      @click="btn"
    >点击我进行搜索</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
    };
  },
  methods: {
    btn() {
      this.isShow = true;
      // 原因: data变化更新DOM是异步的
      //   输入框还没有挂载到真实DOM上前，this.$refs.myInp 的值是 undefined
      // 解决: this.$nextTick()，DOM 更新后再调用 DOM 元素的方法
      this.$nextTick(() => {
        // 通过 JS 方式，调用 DOM 方法主动获取焦点
        this.$refs.myInp.focus();
      });
      // 了解：如果 this.$nextTick() 调用时不传入回调函数会返回一个 Promise 对象
    },
  },
};
</script>

<style>
</style>